<template>
	<div id="exception-log">
		<el-table :data="arr" style="width: 100%" border>
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-descriptions title="操作详情" direction="vertical" class="details" border labelClassName="acenter" contentClassName="acenter">
						<el-descriptions-item v-if="props.row.id" label="id">{{props.row.requestId}}
						</el-descriptions-item>
						<el-descriptions-item v-if="props.row.requestId" label="请求id">{{props.row.requestId}}
						</el-descriptions-item>
						<el-descriptions-item label="操作名">{{props.row.name}}</el-descriptions-item>
						<el-descriptions-item label="耗时">
							<el-tag>{{props.row.time}}ms</el-tag>
						</el-descriptions-item>
						<el-descriptions-item label="执行方法">
							{{props.row.method}}
						</el-descriptions-item>
						<el-descriptions-item label="状态">
							<el-tag type="success" v-if="props.row.status" disable-transitions>正常</el-tag>
								<el-button v-else @click="showStackTrace(props.row.stackTrace)" type="danger" disable-transitions>异常</el-button>
						</el-descriptions-item>
					</el-descriptions>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="id" align="center" width="100">
			</el-table-column>
			<el-table-column label="请求信息" align="center" width="100">
				<template slot-scope="scope">
					<el-button v-if="scope.row.requestId" size="mini" @click="lookRequest(scope.row.requestId)">查看
					</el-button>
					<el-tag type="warning" v-else disable-transitions>无</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="80" align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.status" disable-transitions>正常</el-tag>
					<el-tag type="warning" v-else disable-transitions>异常</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作名" align="center">
				<template slot-scope="scope">
					<div v-if="scope.row.name" class="short name">{{scope.row.name}}</div>
					<el-tag type="info" v-else disable-transitions>无</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="耗时" width="100" align="center">
				<template slot-scope="scope">
					<el-tag>{{scope.row.time}}ms</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="时间" width="200" align="center">
				<template slot-scope="scope">
					{{scope.row.createTime | DF}}
				</template>
			</el-table-column>
		</el-table>
		<pagination v-model="pager" @change="getData"></pagination>

		<el-dialog title="请求详情" :visible.sync="showDialogRequestDetail" append-to-body top="20px" width="80%"
			destroy-on-close>
			<div class="request-detail">
				<el-descriptions title="用户信息" direction="vertical" border>
					<el-descriptions-item label="请求id">{{requestDetail.requestId}}</el-descriptions-item>
					<el-descriptions-item label="uri">{{requestDetail.uri}}</el-descriptions-item>
					<el-descriptions-item label="请求方法">
						<el-tag size="small">{{requestDetail.method}}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="ip">{{requestDetail.ip}}</el-descriptions-item>
					<el-descriptions-item label="ip信息">{{requestDetail.city}}</el-descriptions-item>
					<el-descriptions-item label="系统">{{requestDetail.os}}</el-descriptions-item>
					<el-descriptions-item label="浏览器">{{requestDetail.browser}}</el-descriptions-item>
					<el-descriptions-item label="时间">{{requestDetail.createTime|DF}}</el-descriptions-item>
					<el-descriptions-item label="耗时">
						<el-tag size="small">{{requestDetail.time}}ms</el-tag>
					</el-descriptions-item>
					<el-descriptions-item label="handler">{{requestDetail.handler}}</el-descriptions-item>
					<el-descriptions-item label="参数">{{requestDetail.param}}</el-descriptions-item>
				</el-descriptions>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getOperationLogList
	} from '@/api/operationLog.js'
	import {
		parseTime
	} from '@/utils/index.js'
	import {
		getVisitLogByRequestId
	} from '@/api/visitLog.js'
	import pagination from '@/components/common/Pagination.vue'

	export default {
		name: 'OperationLog',
		created() {
			this.getData(1,this.getDefaultPageSize())
		},
		methods: {
			getData(page,pageSize) {
				this.saveDefaultPageSize(pageSize)
				getOperationLogList(page, pageSize).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.arr = res.data.list
						this.pager = res.data
					} else {
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			showStackTrace(str) {
				this.str = '\n' + str
				this.showDialogStackTrace = true
				this.$nextTick(() => {
					Prism.highlightAll()
				})
			},
			lookRequest(requestId) {
				getVisitLogByRequestId(requestId).then(res => {
					if (res.code == 200) {
						this.showDialogRequestDetail = true
						this.requestDetail = res.data
						console.log(res)
					} else {
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			getDefaultPageSize(){
				let v=window.localStorage.getItem("logPageSize")
				if(v==null||isNaN(v)) return 8
				return parseInt(v)
			},
			saveDefaultPageSize(pageSize){
				window.localStorage.setItem("logPageSize",pageSize)
			}
		},
		data() {
			return {
				arr: [],
				pager: {},
				str: '',
				showDialogStackTrace: false,
				showDialogRequestDetail: false,
				requestDetail: {}
			}
		},
		filters: {
			DF(t) {
				return parseTime(t)
			}
		},
		components: {
			pagination
		}
	}
</script>

<style lang="scss">
	#exception-log {
		width: 100%;

		.short {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.message,
		.exceptionName {
			white-space: nowrap;
		}
	}
</style>
